<template>
<div>
    <div>
        <Top/>
    </div>
    <p>
        fjwei90fjewjfje
    {{ $store.state.count }}
   
    {{c}}
    {{username}}
    {{ $store.state.count }}
    {{ $store.state.user.username}}
    dwadwadwadwd
    </p>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../assets/css/jpetstore.css" type="text/css">
</head>
<body>
    <div id="Content">
        <div id="Welcome">
            <div id="WelcomeContent">
                Welcome to MyPetStore!
            </div>
        </div>

        <div id="Main">
            <div id="Sidebar">
                <div id="SidebarContent">
                    <a href="/catalog/main/FISH"><img src="../../assets/catalog/images/fish_icon.gif" /></a>
                    <br/> Saltwater, Freshwater <br/>
                    <a href="/catalog/main/DOGS"><img src="../../assets/catalog/images/dogs_icon.gif" /></a>
                    <br /> Various Breeds <br />
                    <a href="/catalog/main/CATS"><img src="../../assets/catalog/images/cats_icon.gif" /></a>
                    <br /> Various Breeds, Exotic Varieties <br />
                    <a href="/catalog/main/REPTILES"><img src="../../assets/catalog/images/reptiles_icon.gif" /></a>
                    <br /> Lizards, Turtles, Snakes <br />
                    <a href="/catalog/main/BIRDS"><img src="../../assets/catalog/images/birds_icon.gif" /></a>
                    <br /> Exotic Varieties
                </div>
            </div>

            <div id="MainImage">
                <div id="MainImageContent">
                    <map name="estoremap">
                        <area alt="Birds" coords="72,2,280,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" />
                        <area alt="Fish" coords="2,180,72,250" href="/catalog/viewCategory/FISH" shape="rect" />
                        <area alt="Dogs" coords="60,250,130,320" href="/catalog/viewCategory?categoryId=DOGS" shape="rect" />
                        <area alt="Reptiles" coords="140,270,210,340" href="/catalog/viewCategory?categoryId=REPTILES" shape="rect" />
                        <area alt="Cats" coords="225,240,295,310" href="/catalog/viewCategory?categoryId=CATS" shape="rect" />
                        <area alt="Birds" coords="280,180,350,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" />
                    </map>
                    <img height="355" src="../../assets/catalog/images/splash.gif" align="middle" usemap="#estoremap" width="350" />
                </div>
            </div>
            <div id="Separator">&nbsp;</div>
        </div>
    </div>

    
</body>
</html>
<div>
        <Bottom> </Bottom>
    </div>
</div>
    
</template>
<script>
import { mapMutations, mapState } from "vuex";
import Top from '../../common/top'
import Bottom from '../../common/bottom'
export default {
    components: {
         Bottom,
        Top
       
    },
    computed:{
        ...mapState({
            c:'count',
        }),
        ...mapState('user',['username']),
        
    }
    
}

</script>
<style scoped>

</style>